<template>
  <!-- 将对话框封装为组件最好，可以最简化地封装 -->
  <el-dialog title="新增" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" class="g-dialog">
    <el-steps :active="step" class="g-dialog-step" simple style="margin-bottom: 30px">
      <el-step title="第1步：填写会议基础信息" icon="el-icon-circle-plus" :class="{'is-now': step == 0}"></el-step>
      <el-step title="第2步：填写会议高级信息" icon="el-icon-edit" :class="{'is-now': step == 1}"></el-step>
      <el-step title="第3步：确认信息" icon="el-icon-s-check" :class="{'is-now': step == 2}"></el-step>
      <el-step title="第4步：完成" icon="el-icon-success" :class="{'is-now': step == 3}"></el-step>
    </el-steps>
    <el-form :model="meeting" label-width="120px" class="g-step-form-con" :rules="formRules" ref="form">
      <!-- 第一步 -->
      <div v-if="step == 0">
        <el-form-item label="会议名称" prop="meetingName">
          <el-input v-model="meeting.meetingName" placeholder="请输入会议名称" class="g-input-width"></el-input>
        </el-form-item>
        <el-form-item label="会议内容" prop="meetingContent">
          <el-input v-model="meeting.meetingContent" placeholder="请输入会议内容" type="textarea" :rows="5" class="g-input-width"></el-input>
        </el-form-item>
        <el-form-item label="起止时间" prop="meetingDuration">
          <el-date-picker v-model="meeting.meetingDuration.meetingStart" type="datetime" placeholder="请输入开始时间" style="width: 170px;"></el-date-picker>
          <span style="margin: 0 10px;">至</span>
          <el-date-picker v-model="meeting.meetingDuration.meetingEnd" type="datetime" placeholder="请输入结束时间" style="width: 170px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="会议地点" prop="meetingSite">
          <el-select v-model="meeting.meetingSite" placeholder="请输入会议地点" class="g-input-width">
            <el-option value="601" label="601"></el-option>
            <el-option value="604" label="604"></el-option>
            <el-option value="605" label="605"></el-option>
            <el-option value="608" label="608"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会者" prop="meetingParticipant">
          <el-select v-model="meeting.meetingParticipant" placeholder="请选择参会者" class="g-input-width" multiple>
            <el-option value="赵先生" label="赵先生"></el-option>
            <el-option value="钱先生" label="钱先生"></el-option>
            <el-option value="孙女士" label="孙女士"></el-option>
            <el-option value="李先生" label="李先生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频支持" prop="meetingVideo">
          <el-radio :label="true" v-model="meeting.meetingVideo">需要</el-radio>
          <el-radio :label="false" v-model="meeting.meetingVideo">不需要</el-radio>
        </el-form-item>
      </div>
      <!-- 第二步 -->
      <div v-else-if="step == 1">
        <el-form-item label="主要行业应用" prop="industry">
          <el-select v-model="industry" placeholder="请选择分类" class="g-input-width">
            <el-option value="0" label="政府行业"></el-option>
            <el-option value="1" label="医疗行业"></el-option>
          </el-select>
          <el-checkbox-group v-model="meeting.industry" style="margin-top: 10px">
            <el-checkbox label="市场监管" border class="label"></el-checkbox>
            <el-checkbox label="应急管理" border class="label"></el-checkbox>
            <el-checkbox label="自然资源" border class="label"></el-checkbox>
            <el-checkbox label="党政民生" border class="label"></el-checkbox>
            <el-checkbox label="空间大数据" border class="label"></el-checkbox>
            <el-checkbox label="人工智能" border class="label"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiptAccount">
          <el-input placeholder="请输入收款账户" v-model="meeting.receiptAccount" class="g-input-width">
            <el-select v-model="wayRecipt" slot="prepend" placeholder="收款方式">
              <el-option label="微信" value="0"></el-option>
              <el-option label="支付宝" value="1"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgencyLevel">
          <el-radio v-model="meeting.urgencyLevel" label="0">
            <el-tag size="small" type="danger">紧急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="1">
            <el-tag size="small" type="primary">急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="2">
            <el-tag size="small" type="success">一般</el-tag>
          </el-radio>
        </el-form-item>
        <el-form-item label="地区" prop="region">
          <el-cascader v-model="meeting.region" :options="regionOptions" class="g-input-width"></el-cascader>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="meeting.remark" :rows="10" placeholder="请输入备注"></el-input>
        </el-form-item>
      </div>
      <!-- 第三步 -->
      <div v-if="step == 2">
        <div class="g-form-title">提交信息</div>
        <table class="g-form-detail-item" border="1">
          <tr>
            <td>会议名称</td>
            <td>{{meeting.meetingName}}</td>
          </tr>
          <tr>
            <td>会议内容</td>
            <td>{{meeting.meetingContent}}</td>
          </tr>
          <tr>
            <td>起止时间</td>
            <td>{{meeting.meetingDuration.meetingStart}} - {{meeting.meetingDuration.meetingEnd}}</td>
          </tr>
          <tr>
            <td>会议地点</td>
            <td>{{meeting.meetingSite}}</td>
          </tr>
          <tr>
            <td>参会者</td>
            <td><span v-for="item in meeting.meetingParticipant" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>视频支持</td>
            <td v-if="meeting.meetingVideo">需要</td>
            <td v-else>不需要</td>
          </tr>
          <tr>
            <td>主要行业</td>
            <td><span v-for="item in meeting.industry" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>收款账户</td>
            <td v-if="wayRecipt == '1'">支付宝 {{meeting.receiptAccount}}</td>
            <td v-else-if="wayRecipt == '2'">微信 {{meeting.receiptAccount}}</td>
          </tr>
          <tr>
            <td>紧急程度</td>
            <td v-if="meeting.urgencyLevel == '0'">紧急</td>
            <td v-else-if="meeting.urgencyLevel == '1'">急</td>
            <td v-else-if="meeting.urgencyLevel == '2'">一般</td>
          </tr>
          <tr>
            <td>地区</td>
            <td><span v-for="item in meeting.region" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>备注</td>
            <td>{{meeting.remark}}</td>
          </tr>
        </table>
      </div>
      <div v-if="step == 3" class="complete-con">
        <i class="el-icon-success"></i>
        <h3>填写成功</h3>
        <p>预计两小时内得到审批结果</p><br>
        <el-button type="primary" @click="handleClose">完成</el-button>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="step == 0">
      <el-button type="primary">保存</el-button>
      <el-button @click="step1Next">下一步</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
    <span slot="footer" class="dialog-footer" v-if="step == 1">
      <el-button type="primary">保存</el-button>
      <el-button @click="step2Last">上一步</el-button>
      <el-button @click="step2Next">下一步</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
    <span slot="footer" class="dialog-footer" v-if="step == 2">
      <el-button type="primary">保存</el-button>
      <el-button @click="step3Last">上一步</el-button>
      <el-button @click="step3Next" type="primary" :loading="buttonLoading">确认信息</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
    <span slot="footer" class="dialog-footer" v-if="step == 3">
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { regionOptions } from '@/data/data'
export default {
  data() {
    return {
      dialogVisible: false,
      step: 0,
      meeting: {
        meetingName: '',
        meetingContent: '',
        meetingDuration: {
          meetingStart: '',
          meetingEnd: '',
        },
        meetingSite: '',
        meetingParticipant: [],
        meetingVideo: true,
        industry: [],
        receiptAccount: '',
        urgencyLevel: '0',
        region: null,
        remark: '',
      },
      industry: null,
      wayRecipt: '1',
      regionOptions,
      formRules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        meetingContent: [
          { required: true, message: '请输入会议内容', trigger: 'blur' }
        ],
        meetingDuration: [
          { 
            validator: (rule, value, cb) => value.meetingStart == '' || value.meetingEnd == ''?cb(new Error()):cb(), 
            message: '请输入起止时间', 
            trigger: 'blur',
          }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ]
      },
      buttonLoading: false,
    }
  },
  methods: {
    handleDialogShow() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.step = 0
        this.stepForm = {
          name: '',
          sex: null,
          phone: '',
          address: ''
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    step1Next() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.step++
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    step2Last() {
      this.step--
    },
    step2Next() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.step++
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    step3Last() {
      this.step--
    },
    step3Next() {
      this.buttonLoading = true
      setTimeout(()=>{
        this.buttonLoading = false
        this.step++
      }, 1500)
    },
  }
}
</script>

<style lang="scss" scoped>
.label.el-checkbox.is-bordered {
  margin-left: 0;
  margin-right: 5px;
  padding: 5px 50px;
  background-color: #e9ecf0;
  border-color: #e9ecf0;
  /deep/ .el-checkbox__input {
    display: none;
  }
  /deep/ .el-checkbox__label {
    padding: 0;
  }
  &.is-checked {
    border-color: #2fcb68;
    background-color: white;
    /deep/ .el-checkbox__label {
      color: black !important;
    }
  }
}
.complete-con {
  text-align: center;
  i {
    font-size: 120px;
    color: #44b891;
  }
}
</style>